<md-dialog aria-label="{{ 'ADMINCONSOLE.DIALOG.EDIT_USER_ROLE.TITLE' | translate }}"
           style="max-width: 800px;">
    <form name="vm.newUserForm" ng-submit="vm.submit()" novalidate style="overflow: initial;" layout-padding>
        <md-dialog-content layout="column" layout-padding>
            <div>
                <h2>{{ 'ADMINCONSOLE.DIALOG.EDIT_USER_ROLE.TITLE' | translate }}</h2>
            </div>

            <div layout="column">
                <div style="width: 200px; padding-left: 40px;">
                    <md-radio-group md-theme="eBlockerThemeRadio"
                                    ng-model="vm.user.userRole"
                                    ng-change="vm.userRoleChange()"
                                    class="md-primary">
                        <md-radio-button ng-repeat="userRole in vm.userRoles" ng-value="userRole" >{{'ADMINCONSOLE.DIALOG.ADD_USER.LABEL_' + userRole  | translate }}</md-radio-button>
                    </md-radio-group>
                </div>

                <div ng-show="vm.user.userRole === 'CHILD'"
                     layout="row" layout-align="start center"
                     style="padding-left: 40px;">
                    <span style="font-weight: bold; font-size: 16px;" translate="ADMINCONSOLE.DIALOG.ADD_USER.LABEL_BIRTHDAY"></span>
                    <eb-date-picker date="vm.user.birthday" placeholder-label="{{'ADMINCONSOLE.DIALOG.ADD_USER.PLACEHOLDER_DATE' | translate }}"></eb-date-picker>
                </div>
            </div>
        </md-dialog-content>

        <md-dialog-actions layout="row"
                           layout-align="end center"
                           layout-xs="column"
                           layout-align-xs="center center"
                           style="padding-right: 16px;">
            <md-button type="button" ng-click="vm.cancel()" class="md-raised md-secondary">{{ 'ADMINCONSOLE.DIALOG.EDIT_USER_ROLE.ACTION.CANCEL' | translate }}</md-button>
            <md-button type="submit" class="md-raised md-primary md-accent">{{ 'ADMINCONSOLE.DIALOG.EDIT_USER_ROLE.ACTION.OK' | translate }}</md-button>
        </md-dialog-actions>
    </form>
</md-dialog>
